<template>
  <el-dialog :title="title"
    :visible.sync="dialogVisible"
    width="660px"
    :before-close="handleClose">
    <div class="show-card-list">
      <div class="item-card-box"
        v-for="(item, idx) in dataList"
        :key="idx">
        <div class="item-card-img"> <img style="width: 100%;height: 100%;"
            :src="item.serviceItemImage"
            alt=""> </div>
        <div class="item-card-info-box">
          <div class="item-card-info-name">{{item.serviceItemName}}x{{ item.times }}</div>
          <!-- <div class="item-card-info-price">￥ {{item.itemSettlementPriceStr}}</div> -->

          <div class="item-show-card-times">{{item.usesTimes}} / {{item.times}}</div>
        </div>
      </div>
    </div>
    <div slot="footer"
      class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false
    }
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    dataList: {
      type: Array,
      default: function () {
        return []
      }
    },
    title: {
      type: String,
      default: ''
    }
  },
  watch: {
    show (val) {
      this.dialogVisible = val
    }
  },
  methods: {
    handleClose () {
      this.dialogVisible = false
      this.$emit('toCloseShowProjectBox')
    },
  }
}
</script>

<style lang="scss" scoped>
.show-card-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item-card-box {
    width: 300px;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #eee;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    .item-card-img {
      width: 70px;
      height: 70px;
      border-radius: 4px;
      overflow: hidden;
      margin-right: 10px;
    }
    .item-card-info-box {
      flex: 1;
      overflow: hidden;
      font-size: 14px;
      color: #333;
      .item-card-info-name {
        margin-bottom: 10px;
      }

      .item-show-card-times {
        font-size: 12px;
        text-align: right;
        color: #999;
      }
    }
  }
}
</style>